<template>
    <div class='body'>
        <div class="box">
            <div class="left"></div>
            <div class="right">
                <div class="right-box mb-4">
                    <h1>投票注册</h1>
                    <el-input v-model="psd.name" class="w-50 m-2" placeholder="输入姓名！" :prefix-icon="User"
                        style="width: 300px" /><br>
                    <el-input v-model="psd.age" class="w-50 m-2" placeholder="输入年龄！" :prefix-icon="User"
                        style="width: 300px" /><br>
                    <el-input v-model="psd.psd" type="password" placeholder="输入密码！" show-password :prefix-icon="Lock"
                        style="width: 300px" /><br>
                    <div>
                        <el-select v-model="psd.xing" placeholder="选择性别" size="large" style="width: 300px;">
                            <el-option label="男" value="男" />
                            <el-option label="女" value="女" />
                        </el-select>
                    </div>
                    <el-button type="primary" round style="width: 300px;margin-top: 25px;" @click="dl">注册</el-button>
                </div>
            </div>
        </div>
    </div>
    <!-- 提示 -->
    <el-dialog v-model="dialogVisible" title="Tips" width="500" :before-close="handleClose">
        <span>你的账号是：{{ userid }}</span>
        <span style="color: tomato;">(请牢记)</span>
        <span>点击确定跳转网站首页(注册跳过登录)</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="handleClose">
                    确认
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang='ts'>
import { User, Lock, Message } from '@element-plus/icons-vue'
import { adduser } from '@/api/info/index'
import { Login } from '@/api/Login/index'
import { useRouter } from "vue-router";
import { useCountStore } from "@/store/count";
const qxstore = useCountStore()
const router = useRouter()
let psd = reactive({
    name: "",
    age: "",
    psd: "",
    xing: "",
    info: "用户",
    qx: "user"
})
import { ElMessage, ElMessageBox } from 'element-plus'
const open4 = (data?: any) => {
    if (data) {
        ElMessage.error(data)
    } else {
        ElMessage.error('Oops, this is a error message.')
    }
}
let userid = ref()
let dl = () => {
    for (const key in psd) {
        if (psd[key] == "") {
            open4("请正确输入信息(检查是否有未填项)")
            return
        }
    }
    adduser(psd).then((res: any) => {
        console.log('res登录', res)
        if (res.data) {
            userid.value = res.data.userId
            Login({
                "id": res.data.userId,
                "psd": psd.psd,
            }).then((res: any) => {
                console.log('res登录', res)
                localStorage.setItem('token', res.data.token)
                localStorage.setItem('qx', res.data.qx)
                qxstore.$patch({
                    qx: res.data.qx
                })
                dialogVisible.value = true
            })
        }
    })
}

const dialogVisible = ref(false)

const handleClose = () => {
    dialogVisible.value = false
    router.push({ path: '/' })
}

onMounted(() => {

})

</script>
<style scoped lang='less'>
.body {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(100, 207, 236);
    display: flex;
    align-items: center;
    justify-content: space-evenly;

    .box {
        width: 1000px;
        height: 550px;
        background-color: aliceblue;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left,
        .right {
            width: 50%;
            height: 100%;
        }

        .left {
            background-image: url('@/assets/logo.svg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .right {
            display: flex;
            align-items: center;
            justify-content: space-evenly;



            .right-box {
                width: 400px;
                height: 200px;
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: space-between;
                margin-top: -100px;

                h1 {
                    color: aquamarine;
                    text-align: center;
                    width: 300px;
                }

                .yz {
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                }
            }
        }
    }
}
</style>